<template>
  <div class="body">

 
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main class="elMain">
        <h1>达人推荐</h1>
        <div class="drBox">
          <img src="@/assets/findImg/images/zz1_03.jpg" alt="">
          <img src="@/assets/findImg/images/zz1_05.jpg" alt="">
          <img src="@/assets/findImg/images/zz1_07.jpg" alt="">
          <img src="@/assets/findImg/images/zz1_09.jpg" alt="">
        </div>
        <h1>关注话题</h1>
        <div class="like">
          <div class="gzBox1" v-for="item in 6">
            <img src="@/assets/findImg/images/bb_03.jpg" alt="">
            <p>高颜值几套早春搭配新品</p>
            <p>浪里小草莓<span>❤ 103</span></p>
          </div>
          <!-- <div class="gzBox2">
            <img src="@/assets/findImg/images/bb_05.jpg" alt="">
            <p>高颜值几套早春搭配新品</p>
            <p>浪里小草莓<span>❤ 103</span></p>
          </div>
          <div class="gzBox3">
            <img src="@/assets/findImg/images/bb_07.jpg" alt="">
            <p>高颜值几套早春搭配新品</p>
            <p>浪里小草莓<span>❤ 103</span></p>
          </div>
          <div class="gzBox4">
            <img src="@/assets/findImg/images/bb_12.jpg" alt="">
            <p>高颜值几套早春搭配新品</p>
            <p>浪里小草莓<span>❤ 103</span></p>
          </div>
          <div class="gzBox5">
            <img src="@/assets/findImg/images/bb_13.jpg" alt="">
            <p>高颜值几套早春搭配新品</p>
            <p>浪里小草莓<span>❤ 103</span></p>
          </div>
          <div class="gzBox6">
            <img src="@/assets/findImg/images/bb_14.jpg" alt="">
            <p>高颜值几套早春搭配新品</p>
            <p>浪里小草莓<span>❤ 103</span></p>
          </div> -->
        </div>
        <el-link type="warning" :underline="false" class="elLink">查看更多</el-link>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div> 
  </div>
</template>

<script setup>
import { ref } from 'vue'


</script>

<style lang="scss" scoped>
.body{
  background-color: #f8f8f8;
}
.common-layout {
  width: 80%;
  margin: auto;
  
  h1 {
    text-align: center;
    padding: 20px;
  }
  .drBox{
    display: flex;
    justify-content: space-around;
    img{
      box-shadow: 1px 1px 5px #666666;
    }
  }
  .like{
    display: flex;
    justify-content: space-around;
    
    align-items: center;
    flex-wrap: wrap;
   
    .gzBox1 {
      box-shadow: 1px 1px 5px #666666;
      // background-color: gold;
      display: flex;
      flex-direction: column;
      margin: 5px;
      p{
        margin-left: 20px;
      }
      span{
        margin-left: 50px;
      }
    }
  }
  .elLink{
    margin-left: 48%;
    margin-top: 20px;
 }
}
</style>